<script setup lang="ts">
import Video from './components/Video/index.vue'
import Template from './components/Template/index.vue'
import Picture from './components/Picture/index.vue'
import Music from './components/Music/index.vue'
import Font from './components/Font/index.vue'
import { Close } from '@element-plus/icons-vue'
import type { Props, Emits, MenuKey } from './utils/types'
import { QuestionFilled } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const $props = defineProps<Props>()

const $emit = defineEmits<Emits>()
const dialogVisible = shallowRef(false)

watch($props, (newValue) => {
    dialogVisible.value = newValue.modelValue
}, { immediate: true })


const videoRef = shallowRef<any>()
const templateRef = shallowRef<any>()
const pictureRef = shallowRef<any>()
const musicRef = shallowRef<any>()
const fontRef = shallowRef<any>()

const isBack = computed(() => {
    return (menuActive.value == '1' && videoRef.value.disabledUploadFiles) ||
        (menuActive.value == '2' && templateRef.value.disabledUploadFiles) ||
        (menuActive.value == '3' && pictureRef.value.disabledUploadFiles) ||
        (menuActive.value == '4' && musicRef.value.disabledUploadFiles) ||
        (menuActive.value == '5' && fontRef.value.disabledUploadFiles)
})

function handleClose() {
    if (isBack.value) {
        ElMessageBox.confirm(
            '正在上传文件，上传过程中退出需要重新上传，是否继续？',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            menuActive.value = '1'
            $emit('update:modelValue', false)
        })
    } else {
        menuActive.value = '1'
        $emit('update:modelValue', false)
    }
}

const menuActive = shallowRef<MenuKey>('1')

function handleSelect(key: MenuKey) {
    menuActive.value = key
}



</script>

<template>
    <el-dialog class="upload-material" v-model="dialogVisible" width="1125" :before-close="handleClose"
        :show-close="false" top="8vh" destroy-on-close>
        <div class="title">
            <div class="left">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="64 64 896 896" width="28" height="28"
                    style="border-color: rgba(0,0,0,0);border-width: apx;border-style: undefined" filter="none"
                    fill="rgb(248.88,19.89,19.89)">
                    <g>
                        <path
                            d="M518.3 459a8 8 0 0 0-12.6 0l-112 141.7a7.98 7.98 0 0 0 6.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z">
                        </path>
                        <path
                            d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z">
                        </path>
                    </g>
                </svg>
                <p>上传素材</p>
                <el-popover placement="right-start" width="auto" trigger="hover">
                    <template #reference>
                        <el-icon color="#eeeeee" style="font-size: 20px; margin-left: 10px">
                            <QuestionFilled />
                        </el-icon>
                    </template>
                    <div style="font-family: 'SOURCEHANSANSCN-EXTRALIGHT';">
                        1、请在对应的板块进行上传资源；<br />
                        2、上传成功后系统会对您上传的资源进行编码处理；<br />
                        3、编码处理后请您根据您上传的资源进行价格、分润的设置（给平台的利润）；<br />
                        4、提交资源（公司一半会在1-3个工作日就行审核）后会展示在销售页面；<br />
                        5、审核通过的资源，将在您的“作品管理”页面进行管理；
                    </div>
                </el-popover>
            </div>
            <div class="right">
                <el-icon :size="34" color="#9A9A9A" style="cursor: pointer;" @click="handleClose">
                    <Close />
                </el-icon>
            </div>
        </div>
        <div class="view">
            <el-menu default-active="1" active-text-color="#f91414" @select="handleSelect">
                <el-menu-item index="1">
                    <el-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 32 32" width="22" height="22"
                            style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
                            <g>
                                <path
                                    d="M17.333 8v-2.667h-10.667v-2.667h13.333v5.333h1.333c0.736 0 1.333 0.597 1.333 1.333v0 2.933l6.951-4.867c0.107-0.076 0.239-0.121 0.383-0.121 0.368 0 0.667 0.298 0.667 0.667 0 0 0 0.001 0 0.001v-0 16.107c0 0 0 0 0 0.001 0 0.368-0.298 0.667-0.667 0.667-0.143 0-0.276-0.045-0.385-0.122l0.002 0.001-6.951-4.867v5.6c0 0.736-0.597 1.333-1.333 1.333v0h-18.667c-0.736 0-1.333-0.597-1.333-1.333v0-16c0-0.736 0.597-1.333 1.333-1.333v0h14.667zM20 10.667h-16v13.333h16v-13.333zM22.667 16.479l5.333 3.733v-8.425l-5.333 3.733v0.957zM6.667 13.333h2.667v2.667h-2.667v-2.667z">
                                </path>
                            </g>
                        </svg>
                    </el-icon>
                    <span>视频</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 32 32" width="22" height="22"
                            style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
                            <g>
                                <path
                                    d="M5.333 5.333v21.333h21.333v-21.333h-21.333zM5.333 3.556h21.333c0.982 0 1.778 0.796 1.778 1.778v21.333c0 0.982-0.796 1.778-1.778 1.778h-21.333c-0.982 0-1.778-0.796-1.778-1.778v-21.333c0-0.982 0.796-1.778 1.778-1.778z">
                                </path>
                                <path
                                    d="M5.333 8.889h21.333v1.778h-21.333zM19.743 19.462l-6.012 3.006c-0.439 0.22-0.973 0.042-1.193-0.398-0.059-0.116-0.094-0.253-0.094-0.398 0 0 0 0 0-0v0-6.012c0-0.491 0.398-0.889 0.889-0.889 0.138 0 0.274 0.032 0.398 0.094l6.012 3.006c0.439 0.22 0.617 0.753 0.398 1.193-0.088 0.173-0.225 0.31-0.392 0.395l-0.005 0.002zM17.778 18.667l-3.556-1.778v3.556l3.556-1.778zM8.889 5.333h1.778l1.789 3.556h-1.778zM14.222 5.333h1.778l1.789 3.556h-1.778zM19.556 5.333h1.778l1.789 3.556h-1.778z">
                                </path>
                            </g>
                        </svg>
                    </el-icon>
                    <span>模板视频</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 512 512" width="22" height="22"
                            style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
                            <g>
                                <path
                                    d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z">
                                </path>
                            </g>
                        </svg>
                    </el-icon>
                    <span>图片</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 32 32" width="22" height="22"
                            style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
                            <g>
                                <path
                                    d="M20 6.109v9.891c-0.001 2.208-1.792 3.998-4 3.998s-4-1.791-4-4 1.791-4 4-4c0.478 0 0.936 0.084 1.361 0.238l-0.028-0.009v-9.493c6.737 0.668 12 6.353 12 13.267 0 7.364-5.969 13.333-13.333 13.333s-13.333-5.969-13.333-13.333c0-6.913 5.263-12.599 12-13.267v2.683c-5.284 0.692-9.321 5.166-9.321 10.583 0 5.887 4.769 10.66 10.654 10.668h0.001c0.002 0 0.004 0 0.006 0 5.891 0 10.667-4.776 10.667-10.667 0-4.452-2.727-8.266-6.602-9.865l-0.071-0.026z">
                                </path>
                            </g>
                        </svg>
                    </el-icon>
                    <span>音乐</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <el-icon>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            viewBox="0 0 24 24" width="22" height="22"
                            style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
                            <g>
                                <path d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"></path>
                            </g>
                        </svg>
                    </el-icon>
                    <span>字体</span>
                </el-menu-item>
            </el-menu>
            <div class="main">
                <Video ref="videoRef" v-if="menuActive == '1'" @close="handleClose" />
                <Template ref="templateRef" v-if="menuActive == '2'" @close="handleClose" />
                <Picture ref="pictureRef" v-if="menuActive == '3'" @close="handleClose" />
                <Music ref="musicRef" v-if="menuActive == '4'" @close="handleClose" />
                <Font ref="fontRef" v-if="menuActive == '5'" @close="handleClose" />
            </div>
        </div>
    </el-dialog>
</template>

<style lang="scss">
.upload-material {
    .el-dialog__body {
        padding: 0 !important;
    }
}
</style>

<style lang="scss" scoped>
.upload-material {
    width: 1124px;
    height: 770px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;

    .view {
        display: flex;

        .main {
            width: calc(1125px - 155px);
            padding: 0 40px;
            padding-top: 22px;
            padding-bottom: 22px;
        }
    }

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(187, 187, 187, 1);

        .right {
            display: flex;
            align-items: center;
        }

        .left {
            display: flex;
            align-items: center;

            p {
                color: rgba(249, 20, 20, 1);
                font-size: 18px;
                font-weight: 700;
                margin-left: 10px;
            }
        }
    }

}
</style>

<style lang="scss">
.upload-material {
    padding: 0;
    border-radius: 10px;

    .el-dialog__header {
        padding: 0;
    }
}

.upload-material {

    .el-menu--vertical,
    .el-menu--collapse {
        min-height: 500px;
        border-radius: 0 0 0 10px;
    }

    .el-menu--vertical:not(.el-menu--collapse) {
        width: 155px;
        border-right: 1px solid rgb(187, 187, 187);
    }
}
</style>
